import { FC, useMemo, useState } from "react";

const Demo: FC = () => {
  console.log("rendering");

  const [num1, setNum1] = useState(1);
  const [num2, setNum2] = useState(1);
  const [text, setText] = useState("hello world");

  const sum = useMemo(() => {
    console.log("calculating sum");
    return num1 + num2;
  }, [num1, num2]);

  return (
    <>
      <p>sum: {sum}</p>
      <p>
        num1: {num1}
        <button
          onClick={() => {
            setNum1(num1 + 1);
          }}
        >
          add num1
        </button>
      </p>
      <p>
        num2: {num2}
        <button
          onClick={() => {
            setNum2(num2 + 1);
          }}
        >
          add num2
        </button>
      </p>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </>
  );
};

export default Demo;
